<template>
	<view>
		
		<view class="order" v-if="error == 0">
			<view class="top">
				<view class="left">
					<view class="store">单号:{{ orderList.order_sn }}</view>
					<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
				</view>
			</view>
			<view class="order">
				<view class="top">
					<view class="right" v-if="orderList.status == 0">拼团中</view>
					<view class="right" v-if="orderList.status == 5">拼团成功</view>
					<view class="right" v-if="orderList.status == 10">核销完毕</view>
				</view>
			</view>
			<view class="item">
				<view class="left"><image :src="orderList.thumb" mode="aspectFill"></image></view>
				<view class="content">
					<view class="title u-line-2">{{ orderList.goodsname }}</view>
					<view class="delivery-time"> 创建时间 {{ orderList.createtime }}</view>
				</view>
				
			</view>
			<view class="total">
				<text class="total-price">
					￥{{orderList.total_fee}}元
				</text>
			</view>
		</view>
		
		<view class="order" v-if="error == 1" style="text-align: center;">
			{{errormsg}}
		</view>
		
		<button type="default" style="position: fixed;bottom: 200upx;left: 100upx;width: 550upx;height: 80upx;background-color: #ff5500;line-height: 76upx;color: #fff;font-weight: 555;" @click="finish()">确认核销</button>
		
		
		
		<u-popup border-radius="10" v-model="show"
			@close="close" @open="open" mode="center" 
			length="70%" :mask="mask"
		>
			<view style="height: 400rpx">
				<view style="width: 100%;text-align: center;margin: 200upx 0 150upx;font-size: 30upx;">
					{{toast}}
				</view>
				<view class="close-btn">
					<navigator url="/pages/index/index" open-type="redirect">
						<u-button @click="show = false;" size="medium" type="warning" style="margin-left: 96upx;">回到首页</u-button>
					</navigator>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mask: true, // 是否显示遮罩
				toast:'',
				openid:'',
				orderid:'',
				orderList:{},
				error: 0,
				errormsg:'',
			};
		},
		onShow() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		onLoad(e){
			this.orderid = e.orderid
			uni.showLoading()
			
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.get_orderdetail&app=1',
					method: 'POST',
					data: {
						'openid': this.openid,
						'orderid': this.orderid,
					},
					header: {'Content-Type': 'application/x-www-form-urlencoded'},
					success: res => {
						if (res.data.error == 1) {
							this.error = 1
							this.errormsg = res.data.message
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 6000
							})
							// setTimeout(()=> {
							// 	uni.navigateTo({
							// 		url: '../user/user'
							// 	})
							// }, 1200);
							return
						}
						this.orderList = res.data
					},
					fail: () => {},
					complete: () => {}
				});
				uni.hideLoading()
			},
			finish () {
				uni.request({
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.writeoff&app=1',
					method: 'POST',
					data: {
						'openid': this.openid,
						'orderid': this.orderid,
					},
					header: {'Content-Type': 'application/x-www-form-urlencoded'},
					success: res => {
						// uni.showToast({
						// 	title: res.data.message,
						// 	icon: 'none',
						// 	duration: 6000
						// })
						this.toast = res.data.message
						this.show = true
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			close() {
				// console.log('close');
			},
			open() {
				// console.log('open');
			},
		}
	}
</script>

<style lang="scss">
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		.top {
			display: flex;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.right {
				color: $u-type-warning-dark;
			}
		}
		.item {
			display: flex;
			margin: 20rpx 0 0;
			.left {
				margin-right: 20rpx;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}
				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}
			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;
				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}
		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;
			.total-price {
				font-size: 32rpx;
			}
		}
		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}
	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;
		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}
		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}
</style>
